<!--决策伏击-->
<template>
  <div class="decision">
    <div class="header">
      <img :src="PIC_URL + '/tlbypcWeb/ambush/jcfj.png'" alt="" />
    </div>
    <div class="search_box">
      <div class="search">
        <div class="stock_inp">
          <el-input
            class="inputStock"
            placeholder="请输入股票代码"
            prefix-icon="el-icon-search"
            v-model="params.stockCode"
          >
          <!-- <div slot="append" class="stockBnt" @click="searchBtn">股票搜索</div> -->
          <div slot="append"  @click="searchBtn">股票搜索</div>
          </el-input>
        </div>
        <span class="clearBtn" @click="clearFn">清空搜索结果</span>
        <div class="time_box">
          <span>选择日期</span>
          <el-date-picker
            class="time"
            :clearable="false"
            v-model="params.pubTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="getBirthDate"
            popper-class="timePop"
          />
        </div>
        <div class="page">
          <span class="prev arrow" @click="prev"></span>
          <span class="num">第{{ params.currentPage }}/{{ total }}页</span>
          <span class="next arrow" @click="next"></span>
        </div>
      </div>
    </div>
    <div v-if="list.length <= 0" class="noData">
      <img :src="PIC_URL + '/tlbypcWeb/wushuju.png'" alt="" />
    </div>
    <div class="centerBox" v-for="item in list" :key="item.id" v-else>
      <div class="stock_name">
        <div class="stockInner">{{ item.topicName }}</div>
      </div>

      <div class="arrows">
        <img :src="PIC_URL + '/tlbypcWeb/ambush/jiao.png'" alt="" />
      </div>
      <div class="zhuxiancelue">
        <div class="zhuxianName">
          <img
            :src="PIC_URL + '/tlbypcWeb/ambush/zxcl.png'"
            alt=""
            class="zxcl"
          />
          <p>{{ item.mainStrategy }}</p>
        </div>
      </div>
      <div class="hotBox">
        <!-- 题材一 -->
        <div class="ticaiBox">
          <div class="ticai">
            <img
              :src="PIC_URL + '/tlbypcWeb/ambush/rdtc.png'"
              alt=""
              class="zxcl"
            />
            <p>{{ item.hotTitleName1 }}</p>
          </div>
        </div>
        <!-- 股票 -->
        <div
          class="stockOne"
          @click="stockNameFn('0', item)"
          :class="activeIndex == 1 ? '' : 'cur'"
          @dblclick="dbclickFn(item, 1)"
        >
          <p>{{ item.stockCode1.substr(3, 6) }}</p>
          <p>{{ item.stockName1 }}</p>
        </div>
        <!-- 题材二 -->
        <div class="ticaiBoxs">
          <div class="ticai">
            <img
              :src="PIC_URL + '/tlbypcWeb/ambush/rdtc.png'"
              alt=""
              class="zxcl"
            />
            <p>{{ item.hotTitleName2 }}</p>
          </div>
        </div>
        <!-- 股票2 -->
        <div
          class="stockTwo"
          @click="stockNameFn('1', item)"
          :class="activeIndex == 0 ? '' : 'cur'"
          @dblclick="dbclickFn(item, 1)"
        >
          <p>{{ item.stockCode2.substr(3, 6) }}</p>
          <p>{{ item.stockName2 }}</p>
        </div>
        <!-- 内容 -->
        <div class="content">
          <p class="title">{{ title }}</p>
          <p class="time">{{ item.pubTime.split(" ")[0] }}</p>
          <p class="trend-Data">
            <span>案例:[{{ stockName }}]</span>
            <span> 代码:{{ stockCode.substr(3, 6) }} </span>
          </p>
          <div class="text">
            {{ recommendReason }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDecision } from "../api/api";
import { blockStock, stockMarker } from "../script/utils";

export default {
  data() {
    return {
      params: {
        stockCode: "",
        pubTime: "",
        pageSize: 1,
        currentPage: 1,
        recommendReason: "",
      },
      list: [],
      title: "",
      stockName: "",
      stockCode: "",
      recommendReason: "",
      total: 0,
      activeIndex: 0,
    };
  },
  filters: {},
  created() {},
  mounted() {
    this.getDecision();
  },
  methods: {
    // 原生交互
    blockStock(data) {
      const { stockCode, productId, productColumnId } = data;
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"决策伏击","res":{"stockCode":${stockCode},"pubTime": ${pubTime}},"data":{"pageSize":${pageSize}}}]`
      );
    },
    // 数据
    async getDecision() {
      await getDecision(this.params).then((back) => {
        if (back.status == 1) {
          this.list = back.data.rows;
          this.total = back.data.total;
          this.title = this.list[0].title1;
          this.stockName = this.list[0].stockName1;
          this.stockCode = this.list[0].stockCode1;
          this.recommendReason = this.list[0].recommendReason1;
        }
      });
    },
    // 分页上
    prev() {
      if (this.params.currentPage == 1) return;
      this.params.currentPage = this.params.currentPage - 1;
      this.getDecision();
    },
    // 分页下
    next() {
      if (this.params.currentPage == this.total) return;
      this.params.currentPage = this.params.currentPage + 1;
      this.getDecision();
    },
    // 时间
    getBirthDate(value) {
      this.params.currentPage = 1;
      this.params.pubTime = value;
      this.getDecision();
    },
    // 搜索
    searchBtn() {
      this.params.currentPage = 1;
      this.getDecision();
    },
    // 清空
    clearFn() {
      this.params = {};
      this.getDecision();
    },
    // 股票切换
    stockNameFn(index, item) {
      this.activeIndex = index;
      if (index == 0) {
        this.recommendReason = item.recommendReason1;
        this.title = item.title1;
        this.stockName = item.stockName1;
        this.stockCode = item.stockCode1;
      } else if (index == 1) {
        this.recommendReason = item.recommendReason2;
        this.title = item.title2;
        this.stockName = item.stockName2;
        this.stockCode = item.stockCode2;
      }
    },
    // 双击事件
    dbclickFn(item, num) {
      let key = `stockCode${num}`;
      let stockCode = item[key];
      if (/^(200)/.test(stockCode)) {
        stockCode = stockCode.slice(3, 10) + ".SZ";
      }
      if (/^(100)/.test(stockCode)) {
        stockCode = stockCode.slice(3, 10) + ".SH";
      }
      stockMarker(stockCode, "决策伏击");
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
@import "../style/main.scss";
</style>
